<template>
  <el-container class="home-contenter">
      <!-- 头部区域 -->
  <el-header>
      <div class="logo_title">
          <img src="../assets/bb.png" alt="" style="width: 100px;">
          <span>后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
  </el-header>
  
  <el-container>
      <!-- 侧边栏区域 -->
    <el-aside :width="isCollapse ? '64px' : '200px'">
    <!-- 侧边按钮栏 -->
    <div class="togglebutton" @click="toggleCollapse">|||</div>
    <el-menu background-color="#606266" 
             text-color="#fff" 
             unique-opened 
             :collapse="isCollapse"
             :collapse-transition="false"
             :router="true"
             :default-active="activePath"
             >
        <!-- 一级菜单 -->
      <el-submenu :index="item.id + ''" v-for="item,index in menulist" :key="item.id" >
          <!-- 一级菜单的模板区 -->
        <template slot="title">
            <!-- 图标 -->
          <i :class="iconobj[index]"></i>
          <!-- 文本 -->
          <span>{{item.authName}}</span>
        </template>

        <!-- 二级菜单 -->
        <el-menu-item 
                    :index="subItem.path" 
                    v-for="subItem in item.children" 
                    :key="subItem.id"
                    @click="saveNavState()"
                    >
             <template slot="title">
            <!-- 图标 -->
            <i class="el-icon-menu"></i>
            <!-- 文本 -->
            <span>{{subItem.authName}}</span>
        </template>
        </el-menu-item>

      </el-submenu>
    </el-menu>
    </el-aside>
    <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
    data(){
        return {
            // 左侧菜单数据
            menulist:[],
            iconobj:['el-icon-user','el-icon-lock','el-icon-shopping-bag-1','el-icon-shopping-cart-2','el-icon-coin'],
            isCollapse:false,
            activePath:''
        }
    },
    created(){
        this.getMenuList() //渲染列表栏  
        // 获取到要高亮的列表栏的值
        // 直接将值赋值给 actionPath 让菜单栏高亮
        this.activePath = this.$route.name      
    },
    methods:{
        // 退出登录并冲顶向
        logout(){
            window.sessionStorage.clear();
            this.$router.push('/login');
        },
        async getMenuList(){
            // 执行异步操作获取左侧菜单数据
           const{data:res} = await this.$http.get('menus');
            //    如果请求错误就弹出错误信息
           if (res.meta.status !==200) return this.$message.error(this.meta.msg)
            this.menulist = res.data
        },
        // 点击按钮切换菜单折叠展开
        toggleCollapse(){
            this.isCollapse = !this.isCollapse
        },
        // 点击将二级标签高亮并存储到session中
        saveNavState(){
            // 将点击状态保存到session中
            var activePath = this.$route.name // 获取路由中的name 因为和路由的地址一样
            // 在上面设置default-active属性赋值为菜单的index的值就能高亮了
            window.sessionStorage.setItem('activePath',activePath) //保存到session
            this.activePath = activePath // 并将点击的菜单高亮
        }
    }
}
</script>

<style lang="less" scoped>
    .home-contenter{
        height: 100%;
    }
    .el-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #303133;
        .logo_title{
            position: relative;
            width: 300px;
            img,span{
                position: absolute;
            }
            img{
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
            span{
                left: 100px;
                font-size: 24px;
                top: 50%;
                transform: translateY(-50%);
                color: #fff;
            }
        }
    }
    .el-aside{
        background-color: #606266;
        transition: all 0.4s;
        .el-menu{
            border-right: none; 
        }
    }
    .el-main{
        background-color: #eaedf1;
    }
    .togglebutton{
        background-color: #4a5064;
        color: #fff;
        font-size: 10px;
        line-height: 24px;
        text-align: center;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
</style>